<template>
  <div class="app-container page-container">
    <div class="search-area">
      <el-button type="primary" size="small" @click="handleAddUser">新增</el-button>
<!--      <el-select v-model="pid" style="margin-left: 12px" placeholder="请选择大机" size="small" clearable @change="fetchData(1)">-->
<!--        <el-option-->
<!--          v-for="item in machineOptions"-->
<!--          :key="item.id"-->
<!--          :label="item.deviceName"-->
<!--          :value="item.id"-->
<!--        />-->
<!--      </el-select>-->
<!--      <el-select v-model="statisticalType" style="margin-left: 12px" placeholder="请选择分类" size="small" clearable @change="fetchData(1)">-->
<!--        <el-option-->
<!--          v-for="item in options"-->
<!--          :key="item.value"-->
<!--          :label="item.label"-->
<!--          :value="item.value"-->
<!--        />-->
<!--      </el-select>-->
    </div>
    <div class="table-container">
      <el-table
        ref="multipleTable"
        v-loading="listLoading"
        :data="list"
        border
        highlight-current-row
        height="100%"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        :header-cell-style="{
          background:'#6c89e7',color:'#000000'
        }"
        @selection-change="handleSelectionChange"
      >
        <!--        <el-table-column-->
        <!--          type="selection"-->
        <!--          width="55"-->
        <!--        />-->
        <el-table-column label="用户名" prop="username" />
<!--        <el-table-column label="密码" prop="deviceReplacementTime" />-->
        <el-table-column label="备注" prop="remark" />
        <el-table-column label="操作">
          <template  slot-scope="scope">
<!--            <el-button-->
<!--              type="text"-->
<!--              size="small"-->
<!--              @click="handleModify(scope.row)"-->
<!--            >-->
<!--              修改-->
<!--            </el-button>-->
            <el-button
              type="text"
              size="small"
              @click="handleResetPassword(scope.row)"
            >
              重置密码
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        :current-page="pageNumber"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <template>
      <el-dialog
        :title="title"
        width="600px"
        :visible.sync="visible"
        :before-close="handleClose"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username"/>
          </el-form-item>
          <el-form-item  label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password" />
          </el-form-item>
          <el-form-item :required="false" label="备注" prop="remark">
            <el-input v-model="ruleForm.remark"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" :loading="loading" @click="submitForm()">确 定</el-button>
    </span>
      </el-dialog>
    </template>
    <template>
      <el-dialog
        title="重置密码"
        width="600px"
        :visible.sync="pwdVisible"
        :before-close="handlePwdClose"
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
      >
        <el-form  label-width="100px">
          <el-form-item label="新密码">
            <el-input type="password" placeholder="请输入新密码" v-model="newPassword"/>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handlePwdClose">取 消</el-button>
      <el-button size="small" type="primary" :loading="loading" @click="resetPassword">确 定</el-button>
    </span>
      </el-dialog>
    </template>
  </div>
</template>

<script>
import { getUserList, addUser, resetPassword, deleteUser } from '../../api/user'
// import * as dayjs from 'dayjs'

export default {
  name: 'UserRecords',
  data() {
    return {
      machineOptions: [],
      options: [],
      statisticalType: undefined,
      pid: undefined,
      list: null,
      listLoading: true,
      loading: false,
      multipleSelection: [],
      pageSize: 10,
      pageNumber: 1,
      total: 0,
      ruleForm: {
        username: '',
        password: '',
        remark: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      title: '新增',
      visible: false,
      pwdVisible: false,
      newPassword: '',
      currentRow: {
        id: '',
        password: ''
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    resetPassword() {
      if (!this.newPassword) {
        this.$message.warning('请输入新的用户密码')
        return
      }
      if (this.newPassword.trim().length < 6 || this.newPassword.trim().length > 18) {
        this.$message.warning('用户密码最少6位，最长不超过18位')
        return
      }
      resetPassword({
        id: this.currentRow.id,
        password: this.newPassword
      }).then(({ success }) => {
        if (success) {
          this.$message.success('重置密码成功')
          this.pwdVisible = false
          this.fetchData(1)
        }
      })
    },
    resetForm() {
      this.ruleForm.username = ''
      this.ruleForm.password = ''
      this.ruleForm.remark = ''
    },
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          addUser({
            username: this.ruleForm.username,
            password: this.ruleForm.password,
            remark: this.ruleForm.remark
          }).then(({ success }) => {
            if (success) {
              this.resetForm()
              this.visible = false
              this.fetchData(1)
            }
          })
        }
      })
    },
    handleClose() {
      this.visible = false
    },
    handlePwdClose() {
      this.pwdVisible = false
    },
    tableRowClassName({ row }) {
      if (row.status === 1) {
        return 'warning-row'
      } else if (row.status === 2) {
        return 'error-row'
      }
      return ''
    },
    fetchData(page) {
      this.listLoading = true
      getUserList({
        pageNumber: page || this.pageNumber,
        pageSize: this.pageSize
      }).then(({ data, success }) => {
        if (success) {
          this.list = data?.data || []
          this.total = data?.total || 0
          if (page) this.pageNumber = page
        }
      }).finally(() => { this.listLoading = false })
    },
    handleResetPassword(row) {
      this.currentRow.id = row.id
      this.pwdVisible = true
    },
    handleModify(row) {
      this.ruleForm.username = row.username
      this.ruleForm.password = row.password
      this.ruleForm.remark = row.remark
      this.title = '修改'
      this.visible = true
    },
    handleDelete(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser({
          id: row.id
        }).then(({ success }) => {
          if (success) {
            this.fetchData(1)
            this.$message.success('删除成功')
          }
        })
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData(1)
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.fetchData()
    },
    handleAddUser() {
      this.resetForm()
      this.title = '新增'
      this.visible = true
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style lang="scss" scoped>
.search-area {
  margin-bottom: 16px;
}
.table-container {
  height: calc(100vh - 215px);
}
.pagination-container {
  margin-top: 10px;
}
</style>
